//一、 根据数据渲染分类条 
// console.log(goodData);

function renderNavigator(path) {
    console.log(path);
    // 先把分类条里的内容清空掉；
    var ele = document.querySelector(".conPoint");
    ele.innerHTML = "";
    // 根据path 数据生成对应的dom结构
    path.forEach(function (item) {
        var aEle = document.createElement("a");
        aEle.innerHTML = item.title;
        if (typeof item.url !== "undefined") {
            aEle.href = item.url;
        }
        ele.appendChild(aEle);
    })
}
renderNavigator(goodData.path);


// 二 、渲染 产品的详细内容 
function renderProductDetail(goodsDetail) {
    var priceAreaEle = document.querySelector(".priceArea");
    priceAreaEle.innerHTML = `<h3 class="title">${goodsDetail.title}</h3>
    <p class="con1">${goodsDetail.recommend}</p>
    <div class="price">
        <div class="priceDetail">
            <p>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
            <p>￥ <span>${goodsDetail.price}</span> 元</p>
        </div>
        <div class="buy">
            <p>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</p>
            <p><span>${goodsDetail.promoteSales.type}</span>${goodsDetail.promoteSales.content}</p>
        </div>
    </div>
    <div class="support">
        <div class="supportDetail">
            <p>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</p>
            <p>${goodsDetail.support}</p>
        </div>
        <div class="address">
            <p>配&nbsp;送&nbsp;至</p>
            <p>${goodsDetail.address}</p>
        </div>
    </div>`;
}


renderProductDetail(goodData.goodsDetail);



//三、 根据数据渲染 型号选择区域 
//四、点击型号 选择对应的型号 ； 点击删除的时候 去掉 对应型号的样式
// 五、计算 价钱 

var typeArr = [];

function renderType(crumbData) {

    var chooseAreaEle = document.querySelector(".chooseArea");
    chooseAreaEle.innerHTML = "";
    crumbData.forEach(function (item, k) {
        var dlEle = document.createElement("dl");
        var dtEle = document.createElement("dt");
        dtEle.innerHTML = item.title;
        dlEle.appendChild(dtEle);
        item.data.forEach(function (val, kk) {
            var ddEle = document.createElement("dd");
            ddEle.innerHTML = val.type;
            ddEle.showText = ddEle.innerHTML;
            ddEle.k = k;  // 在dd对象里记录 当前的行数；
            ddEle.kk = kk;  // 在dd对象里记录当前dd的列数；
            if (kk == 0) {
                typeArr.push(ddEle)
            }
            // 当dd生成的时候 立刻绑定点击事件；
            ddEle.onclick = function () {
                // 把当前行的dd所有选择的样式 去掉；
                // console.log("点击了dd按钮",dlEle);
                // 在当前dl行里查找所有的dd
                var dds = dlEle.querySelectorAll("dd");

                console.log("点击的行数是？", k);
                typeArr[k] = this;
                this.showText = this.innerHTML;
                console.log(typeArr);
                renderChioseType(typeArr)

                // 所有的dd的样式去掉
                dds.forEach(function (dd) {
                    dd.style.color = "#666";
                })

                this.style.color = "red";
            }

            dlEle.appendChild(ddEle);
        })

        chooseAreaEle.appendChild(dlEle);

    })
    console.log(typeArr);  // 存放选中型号元素的数组 ；
    renderChioseType(typeArr);
}

renderType(goodData.goodsDetail.crumbData);


function renderChioseType(typeArr) {
    // 获取手机的初始价钱 ；
    var price = goodData.goodsDetail.price;
    // typeArr = [dd,dd,dd,dd];
    var chooseInsertEle = document.querySelector(".chooseInsert");
    chooseInsertEle.innerHTML = "";
    typeArr.forEach(function (item) {
        if (item.showText) {
            var markEle = document.createElement("mark");
            markEle.innerHTML = `${item.showText} <a>X</a>`;

            // 给删除按钮绑定事件 
            var closeBtn = markEle.querySelector("a");
            closeBtn.onclick = function () {
                console.log("点击了关闭", item.k);
                // 获取所有的dl 
                var dls = document.querySelectorAll(".chooseArea dl");
                var dds = dls[item.k].querySelectorAll("dd");
                console.log(dds);
                dds.forEach(function (val) {
                    val.style.color = "#666";
                })

                typeArr[item.k].showText = "";
                renderChioseType(typeArr);
            }
            chooseInsertEle.appendChild(markEle);
            // console.log(item,"行:"+item.k+";列:"+item.kk);
            // 通过 行 和 列 在 data 数据里查找 changePrice 
            console.log(goodData.goodsDetail.crumbData[item.k].data[item.kk].changePrice)
            price += goodData.goodsDetail.crumbData[item.k].data[item.kk].changePrice
        }
    })
    console.log("最终的价钱", price);
    // 单价在乘以数量 
    var productNum = document.querySelector(".num input").value;
    // console.log(productNum);
    price *= productNum;
    document.querySelector(".priceDetail span").innerHTML = price;

    // 组合价钱的修改 
    var ele = document.querySelector(".master p");
    ele.innerHTML = "￥" + price;

    document.querySelector(".result .price").innerHTML = "￥" + price;
}




// 点击添加或者减少数量 
// 获取添加按钮 
var plusEle = document.querySelector(".plus");
var minsEle = document.querySelector(".mins");
var myinput = document.querySelector(".num input");
// 添加产品的数量 
plusEle.onclick = function () {
    myinput.value++;
    renderChioseType(typeArr)
}


// 减少产品的数量 
minsEle.onclick = function () {
    if (myinput.value > 1) {
        myinput.value--
        renderChioseType(typeArr)
    }
}


// 六、计算组合价钱；
var checkboxEles = document.querySelectorAll(".suits input");
checkboxEles.forEach(function (item) {
    item.onclick = function () {
        // 获取当前产品的价格 
        var price = parseInt(document.querySelector(".priceDetail span").innerHTML);
        console.log(price);
        checkboxEles.forEach(function (val) {
            if (val.checked) {
                price += parseInt(val.value);
            }
        })
        console.log(price);
        document.querySelector(".result .price").innerHTML = "￥" + price;
    }
})


// --------------------------------放大镜逻辑-----------------------------

// 一 、鼠标移入 产品图片区域的时候 蒙版显示出来 
var smallAreaEle = document.querySelector(".smallArea");
var maskEle = document.querySelector(".mask");
var bigArea = document.querySelector(".bigArea");
var listEle = document.querySelector(".list");


//根据数据渲染图片
// 点击小图的时候 可以切换产品 及放大的产品图片；
function renderImg(imgsrcs) {

    imgsrcs.forEach(function (img, k) {
        var liEle = document.createElement("li");
        liEle.innerHTML = `<img src="${img.s}" />`;
        listEle.appendChild(liEle);
        // 给每一个li绑定点击事件
        liEle.onclick = function () {
            // 把其他li的边框去掉 
            var imgs = document.querySelectorAll(".list img");
            imgs.forEach(function (img) {
                img.style.border = "";
            })

            console.log("点击图片的索引值是:", imgsrcs[k]);
            // 替换产品区域的图片 
            smallAreaEle.querySelector("img").src = imgsrcs[k].b;
            // 替换放大区域的图片 
            bigArea.querySelector("img").src = imgsrcs[k].b;

            // this.style.border = "1px solid red";
            this.querySelector("img").style.border = "1px solid red";
        }
    })
}

renderImg(goodData.imgsrc)





// 移入移除 ： onmouseenter  和  onmouseleave  ：不会在子元素上触发
//            onmouseover  和 onmouseout  ： 会在子元素上触发事件  ，可以做事件委托
smallAreaEle.onmouseenter = function () {
    maskEle.style.display = "block";
    bigArea.style.display = "block";
}

smallAreaEle.onmouseleave = function () {
    maskEle.style.display = "none";
    bigArea.style.display = "none";

}

// 鼠标移动的时候 蒙版需要跟随鼠标的移动而移动 ；

smallAreaEle.onmousemove = function (e) {
    var x = e.clientX - this.getBoundingClientRect().left;
    var y = e.clientY - this.getBoundingClientRect().top;
    // var y = e.pageY - 230;  鼠标距离页面的上边距 - smallArae距离页面上面的距离
    var maskLeft = x - maskEle.offsetWidth / 2;
    var maskTop = y - maskEle.offsetHeight / 2;
    // 左右的极限距离 
    if (maskLeft <= 0) {
        maskLeft = 0;
    }
    if (maskLeft >= smallAreaEle.offsetWidth - maskEle.offsetWidth) {
        maskLeft = smallAreaEle.offsetWidth - maskEle.offsetWidth
    }

    //上下的极限距离 
    if (maskTop <= 0) {
        maskTop = 0;
    }

    if (maskTop >= smallAreaEle.offsetHeight - maskEle.offsetHeight) {
        maskTop = smallAreaEle.offsetHeight - maskEle.offsetHeight;
    }


    // 计算放大的比例  
    // 计算x轴的比例 
    var numx = maskEle.offsetLeft;
    var maskWidth = smallAreaEle.offsetWidth;
    var imgWidth = document.querySelector(".bigArea img").offsetWidth;
    // 计算y轴的比例
    var numy = maskEle.offsetTop;
    var maskHeight = smallAreaEle.offsetHeight;
    var imgHeight = document.querySelector(".bigArea img").offsetHeight;

    // console.log(numx,maskWidth,imgWidth);
    var disx = (numx / maskWidth) * imgWidth;
    var disy = (numy / maskHeight) * imgHeight;
    document.querySelector(".bigArea img").style.left = -disx + "px";
    document.querySelector(".bigArea img").style.top = -disy + "px";






    maskEle.style.left = maskLeft + "px";
    maskEle.style.top = maskTop + "px";
}


// 点击下一个的时候切换产品 ；
var rightBtn = document.querySelector(".right");
var lis = listEle.querySelectorAll("li");
// console.log(lis);
var num = lis[0].offsetWidth;
rightBtn.onclick = debounce(function () {

    // 点击右侧的时候在原有的基础上 加上一个li的一个宽度 
    var leftNum = parseInt(getComputedStyle(listEle)['left']);
    if (leftNum < -num * 9) {
        leftNum = -num * 9;
    }
    listEle.style.left = leftNum - num + "px";
}, 900);

// 点击上一个按钮的时候 切换产品 
var leftBtn = document.querySelector(".left");
leftBtn.onclick = debounce(function () {
    var leftNum = parseInt(getComputedStyle(listEle)['left']);
    console.log(leftNum);
    if (leftNum < 0) {
        listEle.style.left = leftNum + num + "px";
    }

}, 900);




function debounce(fn, delay) {
    var timer = null;
    return function () {
        if (!timer) {
            fn();
        }
        clearTimeout(timer); // 清除掉上一次的timer ，保证只有一个定时器；
        timer = setTimeout(function () {
            timer = null;
        }, delay);
    }
}


// 回到顶部 
var navListEle = document.querySelector(".navList");
var gototop = navListEle.lastElementChild;
// console.log(gototop);
gototop.onclick = function () {
    // 回到顶部 ；
    var timer = setInterval(function () {
        console.log("执行了");
        document.documentElement.scrollTop -= 50;
        if (document.documentElement.scrollTop <= 0) {
            clearInterval(timer);
        }
    }, 10);
}

// 作业 ： 1.整理内容  2. 把选项卡逻辑利用面向对象封装 ；抽象成选项卡类（构造函数）
// 3.实现一个放大镜 ；
// favicon.ico


// 选项卡逻辑 


// 面向过程 ： 注重事物发展的顺序 按照事物发展顺序一步一步执行 ；
// 获取选项卡点击的按钮 
var  btns = document.querySelectorAll(".tabTitle h4");
var contents = document.querySelectorAll(".tabContent .tab-pane");

new Tab(btns,contents);

// btns.forEach(function(btn,k){
//     btn.onclick = function(){
//         // 按钮需要加上样式名 active
//         btns.forEach(function(val,kk){
//             if(kk==k){
//                 val.classList.add("active");
//             }else{
//                 val.classList.remove("active");
//             }
//         })

//         // 内容的切换
//         contents.forEach(function(item,key){
//             if(key==k){
//                 item.classList.add("active");
//                 item.style.display = "block";
//             }else{
//                 item.classList.remove("active");
//                 item.style.display = "none";
//             }
//         })

//     }
// })


var  btns2 = document.querySelectorAll(".tab-wraped li");
var contents2 = document.querySelectorAll(".tab-content .tab-pane");
new Tab(btns2,contents2);